import React from "react"
import {withRouter} from "react-router-dom"

// assets
import useInfoIcon from '../../../../res/images/web/my/个人信息备份 2@2x.png'
import settingIcon from '../../../../res/images/web/my/通用设置备份 2@2x.png'
import fansBadgeIcon from '../../../../res/images/web/my/粉丝勋章备份 2@2x.png'
import helpIcon from '../../../../res/images/web/my/帮助与反馈备份 2@2x.png'

// stylesheet
import './MyMenu.css'

// antd
import {List} from "antd-mobile"

const MyMenu = (props) => {

    const {history} = props

    const list = [
        {thumb: useInfoIcon, title: '个人信息', path: 'userinfo',},
        {thumb: settingIcon, title: '通用设置', path: 'setting',},
        // {thumb: fansBadgeIcon, title: '等级勋章', path: 'userinfo/level',},
        {thumb: helpIcon, title: '帮助与反馈', path: 'help',},
    ]

    const template = list.map((item, index) => {

        const ItemStyle = {
            // borderRadius: '8px',
            height: '48px',
        }

        const firstItemStyle = {
            borderRadius: '8px 8px 0 0',
            height: '48px',
        }

        const lastItemStyle = {
            borderRadius: '0 0 8px 8px',
            height: '48px',
        }

        const Item = List.Item

        if (index === 0) {
            return <Item
                key={item.title}
                thumb={item.thumb}
                arrow="horizontal"
                style={firstItemStyle}
                onClick={() => history.push(item.path)}
                extra={<span
                    style={{
                        color: '#FA7268',
                    }}
                >填邀请码获奖励</span>}
            >
                {item.title}
            </Item>
        } else if (index === list.length - 1) {
            return <Item
                key={item.title}
                thumb={item.thumb}
                arrow="horizontal"
                style={lastItemStyle}
                onClick={() => history.push(item.path)}
            >
                {item.title}
            </Item>
        } else {
            return (
                <Item
                    key={item.title}
                    thumb={item.thumb}
                    arrow="horizontal"
                    style={ItemStyle}
                    onClick={() => history.push(item.path)}
                >
                    {item.title}
                </Item>
            )
        }

    })

    return (
        <List style={{borderRadius: '8px',}}>
            {template}
        </List>
    )
}




export default withRouter(MyMenu)
